import { observable, action } from 'mobx'
import * as utils from '@/utils/index.js'
// import config from '@/config'
import _const from '@/const'

let nodeRoot = [
	{
		tag:"div",
		attr: {
			class:['emidraw-root-slot']
		},
		isRoot: true,
		children:[],
		styles: {},
		positionBy:[]
	}
]
let nodes = [
	{
		tag:"div",
		class:['emidraw-root-slot'],
		isRoot: true,
		children:[
			{
				class:['iii'],
				tag:"div",
				attr:{value:111},
				selector: ['.iii'],
				styles: {
					width: 200
				},
				children:[
					{
						tag: "div",
						class: ['jjj','@@@','###'],
						children: [
							{
								tag: "div",
								class: ['kkk'],
								children: [
									{
										tag: 'img',
										attr: {
											src: ''
										},
										class: ['lll','fit-parent'],
										selector: ['.hhh','.kkk','.lll']
									}
								]
							}
						]
					}
				]
			},
			{text:"A-Level_2-ffffff",tag:"div", children:[]},
			{text:"B-Level_1",tag:"div",children:[
				{text:"B-Level_2-ggggggg",tag:"div",children:[]},
				{text:"B-Level_2-xxxxxxx",tag:"div",children:[
					{ tag: 's'},
					{ 
						tag: 'text',
						text: 'HELLO'
					},
					{ tag: 's'}
				]}
			]}
		]
	}
]

class Mobx {
	@observable editConfig;
	@observable tag;
	@observable currentNode;
	@observable currentPath;// current node path
	@observable operationMode;
	@observable currentDom;
	@observable inputStatus;
	@observable nodeTree;
	@observable exportStatus;
	@observable slideNumber;

	constructor() {
		this.editConfig = false
		this.tag = 'div'
		this.currentNode = {}
		this.currentPath = [0] // current node path
		this.operationMode = "select"
		this.currentDom = null
		this.inputStatus = false
		this.nodeTree = nodeRoot
		this.exportStatus = false
		this.slideNumber = {
			status: false,
			start:{x:0,y:0},
			moving:{x:0,y:0},
			end:{x:0,y:0},
			el: {},
			baseValue: 0
		}
	}

	@action.bound
	addNode (payload){
		var node=utils.getNodeByPath(this.nodeTree, payload.path)
		let new_node =_.get(payload,'node',{})
		let newNode = _.merge({}, {
			children:[],
			attr:{
			},
			selector: [],
			positionBy: [],
			styles: {},
			tag: payload.tag
		},new_node)
		if(newNode.tag=='text'){
			newNode.text="I'm text"
		}
		utils.addUnit(newNode)
		if(node){
			node.children.push(newNode)
		}else{
			this.nodeTree.push(newNode)
		}
	}
	@action.bound
	updateCurrentPath(data){
		this.currentPath = data
	}
	@action.bound
	setCurrentDom(data){
		this.currentDom = data
	}
	@action.bound
	delNode(path){
		var path = _.clone(path)
		var index = path.pop()
		var node = utils.getNodeByPath(this.nodeTree, path)
		node.children.splice(index, 1)
	}
	@action.bound
	updateNode({path, nodeData}){
		var node = utils.getNodeByPath(this.nodeTree, path)
		if(node.isRoot){
			_.merge(node, payload.data.node)
			return newTree
		} //拦截对根节点的操作
		
		let _node = payload.data.node
		utils.addUnit(_node)
		
		if(_.get(_node.attr,['class','0']) && _node.selector.length == 0){
			_node.selector = [`.${_node.attr.class[0]}`]
		}
		_.merge(node, nodeData)
	}
	@action.bound
	nodeUpdateByPath(payload){
		var node=utils.getNodeByPath(this.nodeTree, payload.path)
		if(node.isRoot){
			_.merge(node, payload.node)
		} //拦截对根节点的操作
		
		// let {act='', actPath=''} = payload.data
		
		if(payload.node){
			let _node = payload.node
			utils.addUnit(_node)
			
			if(_.get(_node.attr,['class','0']) && _node.selector.length==0){
				_node.selector=[`.${_node.attr.class[0]}`]
			}
		}
		
		_.merge(node, payload.node)

		// if(act){
		// 	_[act](node,actPath)
		// }
	}
	@action.bound
	updateExportStatus(status){
		this.exportStatus = status
	}
	@action.bound
	operationModeChange(status){
		this.operationMode = status
	}
	@action
	updateInputStatus(status){
		this.inputStatus = status
	}
	@action
	setSlideNumber(data){
		this.slideNumber = data
	}

}
const rootStore = new Mobx();

export { rootStore };
